<template>
    <div>
        <mt-swipe :auto="4000">
            <!-- 谁使用轮播图组件 谁就传递lundotuList  -->
            <!-- 此时 lundotuList 应该是父组件向子组件传值来设置 -->
          <mt-swipe-item v-for="item in lundotuList" :key="item.url">
              <img :src="item.img" alt="" :class="{'full': isfull}">
         </mt-swipe-item>
        </mt-swipe>
    </div>

    <!-- 分析： 为何商品详情中的轮播图那么丑 -->
    <!-- 1. 首页中的图片，宽和高使用100%的高度，并不适合， 商品详情中的图片 -->
    <!-- 2. 商品详情需要的是，高度100%， 宽度自适应 -->
    <!-- 3. 原因： 轮播图 使用者 的 宽度 有分歧 -->
    <!-- 4. 既然 这两个轮播图，其它方面都没有冲突，只是宽度有分歧那么我们可以定义一个属性，使用轮播图的调用者， 手动指定宽度 -->
</template>
<script>
export default {
    props: ['lundotuList', 'isfull']
}
</script>
<style lang="scss" scoped>
.mint-swipe {
        height: 200px;
        text-align: center;
    
          img{
            //   width: 100%;
              height: 100%;
          }
      
    }
    .full{
        width: 100%;
    }
</style>